<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="assets/css/ace.min.css" />
    <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
    <link href="Widget/icheck/icheck.css" rel="stylesheet" type="text/css" />
    <!--[if IE 7]>
    <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
    <![endif]-->
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
    <![endif]-->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/typeahead-bs2.min.js"></script>

    <!-- page specific plugin scripts -->
    <script src="assets/js/jquery.dataTables.min.js"></script>
    <script src="assets/js/jquery.dataTables.bootstrap.js"></script>
    <script type="text/javascript" src="js/H-ui.js"></script>
    <script type="text/javascript" src="js/H-ui.admin.js"></script>
    <script src="assets/layer/layer.js" type="text/javascript" ></script>
    <script src="assets/laydate/laydate.js" type="text/javascript"></script>
    <script src="assets/dist/theme/echarts.min.js"></script>
    <script src="js/lrtk.js" type="text/javascript"></script>
<title>用户列表</title>
</head>

<body >

<div class="page-content clearfix" >
    <div id="Member_Ratings">
      <div class="d_Confirm_Order_style">
          <div class="search_style">
                      <form  action="/showTrend" >
              <ul class="search_content clearfix">
                  <li>
                      年份  <select name="years" id="year" style="width: 180px">
                      <option value="" disabled selected hidden>请选择</option>
                      <option th:each="yea:${year}" th:value="${yea}" th:text="${yea}" >2020</option>
                  </select>
                  </li>
                  <li style="width:90px;"><button type="submit" class="btn_search" ><i class="icon-search"></i>查询</button></li>
              </ul>
                      </form>


          </div>
          <div class="border clearfix">
             <a href="javascript:ovid()" class="btn btn-danger" onclick="Statistics_btn()"><i class="fa fa-bar-chart"></i>&nbsp;图表展示</a>
          </div>
        <div class="table_menu_list"  >
             <table class="table table-striped table-bordered table-hover" id="sample-table" style="width: 100%" >
		<thead>
		 <tr>
             <th width="25px">月份</th>
             <th width="20px">销售额</th>
			</tr>
		</thead>
           <tbody>
           <tr  th:each="list:${lists}">
               <td th:text="${list['time']}"></td>
               <td th:text="${list['money']}"></td>
           </tr>
           </tbody>

	</table>
        </div>
     </div>
 </div>
</div>
<div id="Statistics" style="display:none">
    <div id="main" style="height:400px; overflow:hidden; width:1000px; overflow:auto" class="side_list"></div>
</div>
<!--添加用户图层-->

</body>
<script type="text/javascript" >
   function func(){
       var vs = $('select  option:selected').val();

       $.ajax({
           type : 'get',//请求方法类型
           dataType : 'json',//预期服务器返回的数据类型
           url : '/stockPro?hous='+vs,//相对路径访问 http://localhost/MySSMAuth/getAuthority2.form?roleid=xxx
           success : function(responseData) {
               showName(responseData);
           }
       });
   }
   function showName(responseData) {
       $("#PRO").find("option").remove();
       $('#PRO').append("<option value= >" + "请选择" + "</option>");
       for (var i = 0; i < responseData.length; i++) {
           var value = responseData[i].product_id;
           var lable = responseData[i].product_name;
           $('#PRO').append(
               "<option value=" + value + ">" + lable + "</option>");
       }
   }

</script>
<script  type="text/javascript" th:inline="none">
jQuery(function($) {
        var oTable1 = $('#sample-table').dataTable( {
        //"ordering": true,
        //"aaSorting": [ 0, "asc" ],//默认第几个排序
		"bStateSave": true,//状态保存
         "searching": false,
         "scrollX": false,
        "lengthMenu": [ 12, 50, 75, 100],
		 } );


        $('table th input:checkbox').on('click' , function(){
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
            .each(function(){
                this.checked = that.checked;
                $(this).closest('tr').toggleClass('selected');
            });

        });


        $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('table')
            var off1 = $parent.offset();
            var w1 = $parent.width();

            var off2 = $source.offset();
            var w2 = $source.width();

            if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
            return 'left';
        }
})
function Statistics_btn(){
    layer.open({
        type: 1,
        title: '当月销售统计',
        // maxmin: true,
        // shadeClose:false,
        area : ['1000px' ,'500px'],
        content:$('#Statistics'),
        btn:['确定','取消'],
    })
}

</script>
<script type="text/javascript"  th:inline="javascript">

    // $(function(){
        var arr=[];
        var sum=[];
        var  use = [[${lists}]];
        for(var i=0;i<use.length;i++){
            arr[i]=use[i].time;
            sum[i]=use[i].money;
        }
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '销售趋势图'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: arr,
            // axisLabel:{
            //     interval:0,
            //     rotate:45,
            // }
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'line',
            symbol:'star',//拐点样式
            symbolSize: 8,
            data: sum,
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // })
</script>
</html>